<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom</title>
		<style>
			#box{
				width: 1200px;
				height: 800px;
			}
			span{
				display: inline-block;
				width: 200px;
				height: 50px;
				line-height:30px;
				text-align:center;
				color: wheat;
				background-color: orangered;
				margin-left: -2px;
			}
			span:hover{
				background-color: navy;
			}
			.childDiv{
				width: 200px;
				height: 200px;
				background-color: gainsboro;
				display: none;
				position: relative;
			}
			.box1{
				margin-left: 10px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
			<span>span text 1</span>
			<span>span text 2</span>
			<span>span text 3</span>
			<span>span text 4</span>
			<span>span text 5</span>
			<div class="childDiv">
				<ul>
					<li>list item 1</li>
					<li>list item 2</li>
					<li>list item 3</li>
					<li>list item 4</li>
					<li>list item 5</li>
				</ul>
			</div>
			<div class="childDiv">div content2</div>
			<div class="childDiv">div content3</div>
			<div class="childDiv">div content4</div>
			<div class="childDiv">div conten5</div>
			
		</div>
		
		
		<script>
			var menus = document.querySelectorAll("span");
			var children = document.querySelectorAll(".childDiv");
			for(let i=0;i<menus.length;i++){
				menus[i].addEventListener('mouseover',function(){
					children[i].style.display="block";
				})
				menus[i].addEventListener('mouseout',function(){
					children[i].style.display="none";
				})
			}
			var x=0;
			for(let i=0;i<children.length;i++){
				children[i].style.left= x+"px";
				x+=201;
			}
		</script>
	</body>
</html>